import { PageProps } from "maishu-chitu-react";
import React = require("react");
import { StationService } from "user/services/stationService";
import { MemberService } from "user/services/memberService";
import { PageSpiner, PageSpinerContext } from "share/controls/page-spiner";
import { MobilePage } from "components/mobilePage";
import { UserPage } from "user/application";

interface Props extends PageProps {
    data: {
        pageId: string
    }
}

type LoadResult = {
    template: PageData
    store: Store,
    pageData: PageData
}

export default class HomeIndexPage extends React.Component<Props> {
    async loadData(): Promise<LoadResult> {

        let station = this.props.createService(StationService);
        let member = this.props.createService(MemberService);

        let template: PageData;
        let [pageData, store] = await Promise.all([
            station.pages.home(),
            member.store()
        ])
        if (pageData.templateId) {
            template = await station.pages.pageDataById(pageData.templateId);
        }
        return {
            template,
            store,
            pageData
        }
    }
    render() {
        return <PageSpiner load={() => this.loadData()}>
            <PageSpinerContext.Consumer>
                {args => {
                    let { pageData, template, store } = args.result as LoadResult
                    return <MobilePage pageData={pageData} elementPage={this.props.source as UserPage} template={template} styleColor={store.Style} />
                }}
            </PageSpinerContext.Consumer>
        </PageSpiner>
    }
}

